<!--
 * @Author: tangcj 572036028@qq.com
 * @Date: 2024-01-31 10:10:56
 * @LastEditors: tangcj 572036028@qq.com
 * @LastEditTime: 2024-02-01 15:06:53
 * @FilePath: /health-gpt-website/src/views/aboutUs/index.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="aboutUsPage">
    <Nav />
    <div class="winBox">
      <div class="bg1">
        <img src="../../assets/bgImg/aboutUsIcon.png" alt="" />
        <div class="title">关 于 我 们</div>
        <div class="line"></div>
      </div>
      <div class="content">
        <div class="contentBox1">
          <div class="aboutUs">ABOUT US</div>
          <div class="contentBox1_left">
            <div class="title">关于我们</div>
            <div class="contentText">
              银江技术是中国领先的字城市建设运营服务商，中国第一批创业板上市企业，股票代码:300020。<br />
              <br />
              公司率先在国内提出智慧城市理念，以人工智能、大数据、物联网等新一代信息技术构建城市大脑，秉承“软件设计、系统交付、数据运营”三位一体的经营策略，推动城市建设、社会治理、民生服务，赋能智慧治理、智慧交通、智慧健康等领域高质量发展。
            </div>
          </div>
          <div class="contentBox1_right">
            <img src="../../assets/bgImg/aboutUsBg2.png" alt="" />
          </div>
        </div>
      </div>
      <div class="content2">
        <div class="contentBox2">
          <div class="aboutUs">HISTROY</div>
          <div class="title">发展历程</div>
        </div>
        <div class="historyBox">
          <div class="historyLine">
            <div
              v-for="(item, index) in historyData"
              :key="index"
              class="historyItem"
            >
              <div class="historyItem_topBox">
                <div class="historyItem_title">{{ item.year }}</div>
                <img
                  class="historyLineIcon"
                  src="../../assets/icon/historyLineIcon.png"
                  alt=""
                />
              </div>
              <div class="historyItem_circle"></div>
              <div class="historyItem_contentBox">
                {{ item.content }}
                <div class="notes">
                  {{ item.notes }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footerClass">
        <Footer />
      </div>
    </div>
  </div>
</template>
<script>
import Nav from "../../components/Nav.vue"
import Footer from "../../components/Footer"
export default {
  components: { Nav, Footer },
  data () {
    return {
      historyData: [
        {
          year: '2023',
          content: '推出银江通明健康智能分析研判辅助平台推出健康宝HealthGPT',
        }, {
          year: '2021',
          content: '打造全国首家全场景智能体医院联合华为&上海移动签订5G+智慧医疗战略合作协议',
        }, {
          year: '2018',
          content: '打造全国第一个副省级省会城市区域医疗样板案',
          notes: '例一一沈阳市全民人口健康信息平台',
        },
        {
          year: '2017',
          content: '携手华为发布物联网医院联合解决方案打造国内首家物联网医院武汉亚心心脏病医院',
        },
        {
          year: '2015',
          content: '创办全球首家互联网医院一一美国华人执业医生网络医院',
        }
      ],
    }
  },
  methods: {
  },
}
</script>
<style scoped lang="less">
.aboutUsPage {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .winBox {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    align-items: center;
    .bg1 {
      height: 760px;
      width: 100%;
      background-image: url("../../assets/bgImg/aboutUsBg1.png");
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 180px;
        height: 180px;
        margin-top: 236px;
      }
      .title {
        height: 84px;
        font-size: 60px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 100;
        color: #287984;
        line-height: 70px;
        margin-top: 20px;
      }
      .line {
        margin-top: 10px;
        width: 136px;
        height: 5px;
        background: #287984;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
      }
    }
    .content {
      width: 100%;
      display: flex;
      justify-content: center;
      background: #ffffff;
    }
    .contentBox1 {
      height: 516px;
      width: 1200px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;

      .aboutUs {
        position: absolute;
        left: 42px;
        top: 60px;
        font-size: 80px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: rgba(18, 59, 231, 0.1);
        line-height: 94px;
      }

      .contentBox1_left {
        width: 560px;

        .title {
          margin-top: 60px;
          font-size: 36px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        .contentText {
          margin-top: 92px;
          font-size: 18px;
          font-family: Noto Sans SC, Noto Sans SC;
          font-weight: 400;
          color: #333333;
        }
      }
      .contentBox1_right {
        img {
          height: 340px;
          width: 379px;
        }
      }
    }
    .content2 {
      height: 516px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f7f8fa;
    }
    .historyBox {
      width: 100%;
      height: 100%;
      .historyLine {
        width: 100%;
        height: 100%;
        border-top: 1px solid #e0e5f8;
        margin-top: 71px;
        display: flex;
        justify-content: space-around;
        .historyItem {
          width: 200px;
          margin-top: -37px;
          .historyItem_topBox {
            width: 39px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .historyItem_title {
              font-size: 16px;
              line-height: 19px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              color: #123be7;
            }
            .historyLineIcon {
              margin-top: 6px;
              width: 24px;
              height: 98px;
            }
          }
          .historyItem_circle {
            margin-top: -101px;
            margin-bottom: 50px;
            margin-left: 4.5px;
            width: 24px;
            height: 24px;
            border: 3px solid #8aa1d4;
            border-radius: 50%;
            animation: circleAnim 1.5s ease-out infinite;
          }
          @keyframes circleAnim {
            0% {
              transform: scale(0);
              opacity: 0;
            }
            50% {
              opacity: 1;
            }
            100% {
              transform: scale(1);
              opacity: 0;
            }
          }
          .historyItem_contentBox {
            width: 200px;
            min-height: 100px;
            background: #ffff;
            box-shadow: 0px 4px 10px 0px rgba(88, 134, 189, 0.13);
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            padding: 16px;
            padding-top: 25px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 16px;

            .notes {
              margin-top: 8px;
              font-size: 12px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              color: #7d89b5;
              line-height: 14px;
            }
          }
        }
      }
    }
    .contentBox2 {
      width: 1200px;
      display: flex;
      justify-content: space-between;
      position: relative;
      .aboutUs {
        position: absolute;
        left: 42px;
        top: 60px;
        font-size: 80px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: rgba(18, 59, 231, 0.1);
        line-height: 94px;
      }
      .title {
        margin-top: 129.5px;
        font-size: 36px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
    .footerClass {
      // height: 340px;
    }
  }
}
</style>